<!-- 个人中心 -->
<template>
  <div class='container'>
    <div class="welcome">
      <span class="hi">Hi</span>
      {{baseInfo.nickname}}
      <span style="color:#575757">：欢迎您进入个人党建履职页面！</span>
    </div>
    <!-- 基本信息 -->
    <div class="headerImg">
        <div>
          <img :src="baseInfo.photourl" alt="">
          <!-- <img src="../../assets/temp.png" alt=""> -->
        </div>
    </div>
    <titleCom text = "0"></titleCom>
    <!-- 我的信息 -->
    <ul class="myInfo">
      <li v-for="(item,i) in myInfo" :key="i">
        <div>{{item.text}}</div>
        <div>{{item.info}}</div>
      </li>
    </ul>
    <titleCom text = "1"></titleCom>
    <!-- 我的组织 -->
    <ul class="myInfo">
      <li v-for="(item,i) in orgInfo" :key="i">
        <div>{{item.text}}</div>
        <div>{{item.info}}</div>
      </li>
    </ul>

    <titleCom text = "2"></titleCom>
      <!-- 全息画像同心圆 -->
    <div class="aCircle">
      <iframe class="aCircleIframe" :src="ip+'/jtdj/SPES/GA/html/circleDY.html?empCode='+usercode+'&roleid='+roleid" frameborder="0"></iframe>
    </div>
    <!-- 党费,登高等四个卡片 -->
    <div class="cardBox">
      <div class="card" v-for="(item,i) in fourCard" :key="i" @click="$router.push({path:fourCardRoute[i]})">
        <div class="card-top">
          <div class="card-top-text">{{item.name}}</div>  
          <div class="cardRight">
            <img :src="i==0||i==3?blueArrow:grayArrow" alt="">
          </div>
        </div>
        <div class="card-bottom">
          <div class="botLeft">
            {{item.number}}
            <span class="redCompany">{{item.name === '党费缴纳' ? '' : '次'}}</span>
          </div>
        </div>
        <div class="card-bottom-bot">{{item.botText}}</div>
      </div>
    </div>
    <!-- 我的待办 -->
    <titleCom text = "3"></titleCom>
    <div class="myNeeDealt ">
      <!-- 没有数据 -->
      <p v-if="noNeeDealtIsTure" class="noNeeDealt">
        <img src="../../assets/greenLeaf.png" alt="">
         恭喜你，无事一身轻！
      </p>
      <!-- 有数据 -->
      <div v-else class="noNeeDealt">
        <img src="../../assets/Notice.png" alt="">
        <van-swipe class="viewBox" :autoplay="2000" vertical :show-indicators="false">
          <van-swipe-item v-for="(item,i) in needToDealt" :key="i" >
            <a :href="item.url">
              {{item.contentTask}}
            </a>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 党建智搜 -->
    <titleCom text = "4"></titleCom>
    <div class="serachDiv" @click="$router.push({path:'/search'})">
      <input type="text" placeholder="输入关键字...">
      <button>
        <div><svg-icon icon-class="search"></svg-icon></div>
      </button>
    </div>
    <titleCom text = "5"></titleCom>
    <!-- tab切换 -->
    <div>
      <!-- 地图 -->
      <div style="height:300px;border-bottom: 1rem solid #f4f4f4;">
        <iframe class="mapIframe" :src="ip+'/jtdj/SPES/GA/MyFuncMap.html'" frameborder="0"></iframe>
      </div>
      <!-- 表格 -->
      <tables current-table = "0-0"></tables>
      <div style="height:3rem"></div>
    </div>
    
    
  </div>
</template>

<script>
import blueArrow from '../../assets/arrowRightBlue.png'
import grayArrow from '../../assets/arrowRightGray.png'
import titleCom from '../components/title'
// import tables from '../components/tables'
import { getUserInfo } from '@/api/index.js'
import { getUrlKey, ArrayIsEmputy } from '@/untils/untils.js'
export default {
  components: {
    titleCom,
    tables: function(resolve){
       require(["../components/tables.vue"], resolve);
    }
  },
  data() {
  return {
      blueArrow:blueArrow,
      grayArrow:grayArrow,
      baseInfo: {},
      myInfo:[
        {text: '姓名', info: ''},
        {text: '党龄', info: ''},
        {text: '入党时间', info: ''},
        {text: '转正时间', info: ''},
      ],
      orgInfo: [
        {text: '所属党委', info: ''},
        {text: '所在党支部', info: ''},
        {text: '党内职务', info: ''},
        {text: '基层联系点', info: ''}
      ],
      time: '',
      fourCard:[
        {name: '党费缴纳', time: '', number: '',botText:''},
        {name: '党员登高', time: '', number: '',botText:''},
        {name: '三会一课', time: '', number: '',botText:''},
        {name: '党建联系', time: '', number: '',botText:''}
      ],
      fourCardRoute:['/partyFeePayment','/partyMemberToheight','/threeMetings','/partyBuildingLinks'],
      needToDealt:[],
      ip:window.localStorage.getItem('ip'), 
      usercode: '',
      roleid: ''
    };
  },
  computed:{
    noNeeDealtIsTure() {
      return ArrayIsEmputy(this.needToDealt)
    }
  },
  created () {
    this.usercode = getUrlKey('usercode')
    this.roleid = getUrlKey('roleId')
    window.localStorage.setItem('usercode',this.usercode)
    window.localStorage.setItem('roleId',this.roleid)
    this.getUserInfo({"methodName":"getUerInfo","usercode":this.usercode,roleid:this.roleid,serviceName:"PersonalInfo"})
    this.getUserInfo({"methodName":"countData","usercode":this.usercode,serviceName:"PersonalInfo"})
    this.getUserInfo({"methodName":"getMeetingUserInfo","usercode":this.usercode,roleid:this.roleid,serviceName:"PersonalInfo"})
  },
  mounted(){
    
  },
  methods: {
    getUserInfo(val){// 获取用户基本信息
      getUserInfo(val).then(res => {
        const data = res.data
        if (res.status == '1') { 
          switch (val.methodName) {
            case 'getUerInfo':this.handleGetUserInfo(data);break;
            case 'countData':this.handleCountData(data);break;
            case 'getMeetingUserInfo':this.getMeetingUserInfo(data); break;
            default:
              break;
          }
        } else {
          this.$toast('服务器连接错误请重试');
        }
      })
    },
    handleGetUserInfo(data){// 基础信息
      this.baseInfo = data
      this.myInfo[0].info = data.realname
      this.myInfo[1].info = data.partyyear
      this.myInfo[2].info = data.ybdybegindate
      this.myInfo[3].info = data.becomedate
      this.orgInfo[0].info = data.partyComm
      this.orgInfo[1].info = data.organname
      this.orgInfo[2].info = data.partyduty
      this.orgInfo[3].info = data.link
    },
    handleCountData(data){// 四个tab 
      this.fourCard[0].number = data.partyfee
      this.fourCard[1].number = data.actcount + '/' + data.plancount
      this.fourCard[0].botText = data.partyfeetip
      this.fourCard[1].botText = data.climbtip
    },
    getMeetingUserInfo(data){
      this.needToDealt = data.dbList;
      this.fourCard[2].number = data.actcount + '/' + data.plancount
      this.fourCard[3].number = data.djlxcount + '/' + data.djlxAllcount
      this.fourCard[2].botText = data.approvalnoticeresults
      this.fourCard[3].botText = data.djlxtips
    }
    
  }
}
</script>
<style scoped>

.aCircleIframe,.mapIframe{
  width: 100%;
  height: 100%;
}
.viewBox{
  height: 17px;
  overflow: hidden;
}
.viewBox a{
  display: block;
  color: #000000;
  white-space: nowrap;
}
.noNeeDealt{
  padding: 0 0 5rem 3rem;
  display: flex;
  align-items: center;
}
.noNeeDealt>img{
  width:17px;
  height:17px;
  margin-right: 2rem;
}
.myInfo>li div:nth-child(1){
  flex: 3;
  font-weight: 600;
}
.myInfo>li div:nth-child(2){
  flex: 7;
}
.myInfo>li{
  font-size: 14px;
  line-height: 2em;
  display: flex;
}
.myInfo{
  padding-bottom: 10px;
  padding-left: 7.5rem;
}
.headerImg>div img{
  height: 100%;
}
.headerImg>div{
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:0px 10px 9px 1px rgba(150,150,150,0.65);
  border-radius:15px;
  height: 162px;
  overflow: hidden;
}
.headerImg{
  height: 233px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hi{
  display: inline-block;
  width:13px;
  height:13px;
  background:rgba(187,56,62,1);
  border-radius:0.3rem;
  margin-right: 1rem;
  font-size: 1.4rem;
  text-align: center;
  line-height: 13px;
  color: #ffffff;
}
.welcome{
  display: flex;
  align-items: center;
  height: 44px;
  font-size: 14px;
  border-bottom: 1rem solid #f4f4f4;
  padding-left: 3.8rem;
}

.serachDiv>input{
  box-sizing: border-box;
  width: 59.5rem;
  height: 24px;
  border: 1px solid #F0F0F0;
  padding-left: 3rem;
  outline: none;
}
.serachDiv>button>div{
  width:15px;height:15px
}
.serachDiv>button{
  width: 9rem;
  height: 24px;
  background: #0A8DCE;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serachDiv{
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3.5rem 5.5rem;
  border-bottom: 1rem solid #f4f4f4;
}
.iconDiv{
  width: 5rem;
  height: 25px;
}
.taskCardImg{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 10rem;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #f4f4f4;
  box-shadow: 0 0 5px #888888;
}
.taskCard{
  display: flex;
  width: 10rem;
  font-size: 2.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.task{
  height: 105px;
  padding: 0 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rem solid #f4f4f4;
}
.moreSvg{
  width: 1.6rem;
  height: 8px;
}
.botLeft{
  color: #BB383E;
  font-size: 3rem;
}
.cardRight>img{
  width: 100%;
  height: 100%;
}
.cardRight{
  width: 17px;
  height: 17px;
}
.card-bottom{
  display: flex;
  justify-content: space-between;
}
.redCompany{
  color: #BB383E;
  font-size: 2.4rem;
}
.grayTime{
  color: #ccc;
  font-size: 2.4rem;
}
.card-top-text{
  border-radius: 15px;
  padding: 3.5px 10px;
  color: #ffffff;
}
.cardBox .card:nth-child(1) .card-top-text,.cardBox .card:nth-child(4) .card-top-text{
  background:rgba(187,56,62,1);
}
.cardBox .card:nth-child(3) .card-top-text,.cardBox .card:nth-child(2) .card-top-text{
  background:#F5BE2B;
}
.card-bottom-bot{
  color: #B1B1B1;
  padding-top:10px;
  font-size: 10px;
}
.card-top{
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  padding: 15px 0 10px;
}
.card:nth-child(1),.card:nth-child(2){
  /* margin-bottom: 10px; */
}
.card{
  padding: 0 15px;
  height: 49%;
  width:49.5%;
  background: #ffffff;
}
.cardBox{
  padding: 9px 17px;
  height: 195px;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #F4F4F4;
}
.aCircle{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-strip-right{
  flex: 7;
}
.list-strip-left{
  flex: 3;
}
.list-more{
  padding: 2.7rem 3.5rem;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #f4f4f4;
}
.list-strip:nth-child(1){
  border-top: 1px solid #f4f4f4;
}
.list-strip{
  padding: 2.7rem 3.5rem;
  display: flex;
  border-bottom: 1px solid #f4f4f4;
  align-items: center;
}
.container{
  font-size: 2.8rem;
}

</style>